@import 'common.sass'

.effect-title
    width: auto
    height: auto
    display: flex
    flex-direction: column
    align-items: center

    .english
        font-size: vw(18)
        color: $content_color

    .chinese
        font-size: vw(32)
        display: flex
        align-items: center
        color: $title_color

        .text
            margin-left: vw(20)
            margin-right: vw(20)

        .decoration
            width: vw(10)
            height: vw(36)
            border-radius: vw(5)
            background-color: $brand_main_color

    .chinese-detail
        font-size: vw(24)
        color: $title_color

#five-project-container, #mix-effect-container, #hair-line-container
    width: vw(600)
    height: auto
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center

    .swiper-wrapper

        .swiper-slide
            width: vw(280)
            height: vw(400)
            text-align: center
            font-size: vw(18)

            display: flex
            justify-content: center
            align-items: center
            transition: 300ms
            transform: scale(0.875)
            opacity: 0.2

            .img
                width: vw(280)
                height: vw(400)

        .swiper-slide-active,
        .swiper-slide-duplicate-active
            transform: scale(1)
            z-index: 996
            opacity: 1

.pagination-container
    width: vw(750)
    height: auto
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center

    .swiper-pagination-bullet
        width: vw(12)
        height: vw(12)
        border-radius: vw(12)
        margin: 0 vw(4)
        background-color: $brand_main_color

.five-project-swiper-subtitle
    width: vw(750)
    font-size: vw(28)
    text-align: center

.five-project-swiper-description
    width: vw(750)
    font-size: vw(24)
    text-align: center
